<template>
    <div>
        <el-table :data="colors" style="width: 100%" border>
            <el-table-column width="38">
                <template #default="scope">
                    <el-checkbox v-model="scope.row.isVisible" size="small" @change="changeVisibleByColor" />
                </template>
            </el-table-column>
            <el-table-column prop="colorName" label="名称" />
            <el-table-column label="" width="40">
                <template #default="scope">
                    <el-color-picker v-model="scope.row.colorValue" @change="handleChangeColor"
                        size="small"></el-color-picker>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="info" @click="handleSave" size="small">保存颜色</el-button>
        <!-- <el-button type="info" @click="handleManagement" size="small">管理颜色</el-button> -->
    </div>

</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import { ElNotification } from 'element-plus'
import { useCurrentModelStore } from '@/stores/current';
import { ChangeColors, GetTextureDictOnGroups } from '@/core3d/drawing/texture';
import { changePartVisibleByTexture } from '@/core3d';
import { useLibStore } from '@/stores/library';

interface ColorItem {
    colorName: string;
    isVisible: boolean;
    colorValue: string;
}

export default defineComponent({
    setup(props, { emit, attrs }) {
        const colors = ref<ColorItem[]>([]);

        const store = useCurrentModelStore();
        watch(() => store.currentCurrentModelData, (n, o) => {
            if (n) {
                colors.value.length = 0;
                var dict = GetTextureDictOnGroups(n);
                for (var key in dict) {
                    colors.value?.push({ colorName: key, colorValue: dict[key], isVisible: true })
                }
            }
        });

        const handleChangeColor = () => {
            const dict: { [key: string]: string } = {};
            const colordict = colors.value.reduce((res, item) => {
                res[item.colorName] = item.colorValue;
                return res;
            }, dict);//拼接字典

            ChangeColors(dict);
        }

        const changeVisibleByColor = () => {
            const dict: { [key: string]: boolean } = {};
            const colordict = colors.value.reduce((res, item) => {
                res[item.colorName] = item.isVisible;
                return res;
            }, dict);//拼接字典

            changePartVisibleByTexture(dict);
        }

        const handleSave = () => {
            const dict: { [key: string]: string } = {};
            const colordict = colors.value.reduce((res, item) => {
                res[item.colorName] = item.colorValue;
                return res;
            }, dict);//拼接字典

            const store = useLibStore();
            store.save_colors(dict);

            ElNotification.success({
                title: '成功保存颜色方案',
            });
        }

        const handleManagement = () => {

        }

        return { colors, handleChangeColor, changeVisibleByColor, handleSave, handleManagement };
    }
});
</script>